﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title></title>
    <link rel="stylesheet" href="/css/scenario2_GetPosition.css">
    <script src="/js/scenario2_GetPosition.js"></script>
</head>

<body class="win-type-body">
    <div data-win-control="SdkSample.ScenarioInput">
        <p>Geolocation API allows application to take a one-shot reading of the current position.</p>
        <div style="-ms-grid-column: 1; -ms-grid-row: 8">
            DesiredAccuracy (meters):
            <input style="-ms-grid-column: 2; -ms-grid-row: 8; width: 80px; margin-left: 10px" type="number" id="desiredAccuracyInMeters" class="win-textbox">
        </div>
        <button class="action win-button" id="getGeopositionButton">Get Geolocation</button>
        <button class="action win-button" id="cancelGetGeopositionButton">Cancel</button>
        <br>
        <br>
    </div>
    <div data-win-control="SdkSample.ScenarioOutput">
        <div style="display: -ms-grid; -ms-grid-columns: auto auto auto; -ms-grid-rows: auto auto auto auto auto auto auto auto auto">
            <div style="-ms-grid-column: 1; -ms-grid-row: 1">Latitude: </div>
            <div style="-ms-grid-column: 2; -ms-grid-row: 1; margin-left: 10px" id="latitude">No data</div>
            <div style="-ms-grid-column: 1; -ms-grid-row: 2">Longitude: </div>
            <div style="-ms-grid-column: 2; -ms-grid-row: 2; margin-left: 10px" id="longitude">No data</div>
            <div style="-ms-grid-column: 1; -ms-grid-row: 3">Accuracy: </div>
            <div style="-ms-grid-column: 2; -ms-grid-row: 3; margin-left: 10px" id="accuracy">No data</div>
            <div style="-ms-grid-column: 1; -ms-grid-row: 4">Source: </div>
            <div style="-ms-grid-column: 2; -ms-grid-row: 4; margin-left: 10px" id="source">No data</div>
            <div style="-ms-grid-column: 1; -ms-grid-row: 5; opacity: 0" id="positionLabel">PositionDilutionOfPrecision: </div>
            <div style="-ms-grid-column: 2; -ms-grid-row: 5; opacity: 0; margin-left: 10px" id="position">No data</div>
            <div style="-ms-grid-column: 1; -ms-grid-row: 6; opacity: 0" id="horizontalLabel">HorizontalDilutionOfPrecision: </div>
            <div style="-ms-grid-column: 2; -ms-grid-row: 6; opacity: 0; margin-left: 10px" id="horizontal">No data</div>
            <div style="-ms-grid-column: 1; -ms-grid-row: 7; opacity: 0" id="verticalLabel">VerticalDilutionOfPrecision: </div>
            <div style="-ms-grid-column: 2; -ms-grid-row: 7; opacity: 0; margin-left: 10px" id="vertical">No data</div>
        </div>
    </div>
</body>

</html>